<template>
	<div class="bodybox">
		<div class="containerbox">
			<form>
				<h1>注册列表</h1>
				<div class="listbox">
					<label>用户名：</label>
					<input v-model="userInput" placeholder="请输入用户名" />
				</div>
				<div class="listbox">
					<label>昵&emsp;称：</label>
					<input v-model="nickInput" placeholder="请输入昵称" />
				</div>
				<div class="listbox">
					<label>密&emsp;码：</label>
					<input v-model="passwordInput" type="password" placeholder="请输入密码" />
				</div>
				<div class="listbox">
					<label>重复密码：</label>
					<input v-model="passwordInput2" type="password" placeholder="请确认密码" />
				</div>
				<div class="listbox touxiang">
					<label>头&emsp;像：</label>
					<input type="file" name="headerImg" />
				</div>
				<div class="form_item">
					<input type="button" class="subbtn" @click="onSign" value="注册">
				</div>
				<router-link to="/index">
					<div class="">已有账号？点击<span class="switch login_Btn">登录</span></div>
				</router-link>
			</form>
		</div>
	</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { RequestonLogin } from "../api/login.ts";
const router = useRouter();
const issuccess = () => {
	router.replace({ path: '/' })
}
let userInput = ref('')
let nickInput = ref('')
let passwordInput = ref('')
let passwordInput2 = ref('')
const onSign = async () => {
	let headerImgInput = document.querySelector('input[name="headerImg"]')
	console.log(userInput.value, nickInput.value);
	let headerImgFile = headerImgInput.files[0]
	// 非空验证
	// 密码强度验
	if (!passwordInput.value === passwordInput2.value) {
		// 调用注册接口注册用户
		alert("两次密码不相同请重新输入");
		return
	}
	let formDate = new FormData()
	formDate.append('username', userInput.value)
	formDate.append('password', passwordInput.value)
	formDate.append('nick', nickInput.value)
	formDate.append('headerImg', headerImgFile)
	let data = await RequestonLogin(formDate)
	let { resultCode, resultInfo } = data
	if (resultCode == 1) {
		alert(resultInfo)
	} else {
		alert(resultInfo)
	}
}
</script>
<style lang="scss" scoped>
html {
	height: 100%;
}

.bodybox {
	border-top: 1px solid #fff;
	height: 99%;
	height: 99.9vh;
	background: url('/img/t2.png') no-repeat center/cover;

	.containerbox {
		width: 500px;
		position: relative;
		margin: 0 auto;
		// margin-top: 100px;
		top:50%;
		margin-top: -300px;
		color: #fff;
		// display: flex;
		justify-content: center;
		// position:absolute;
		height: 570px;

		form {
			display: inline-block;
			text-align: center;
			position: relative;
			padding: 25px 40px;
			background: rgba(245, 106, 51,.6);
			border-radius: 30px;
			min-width: 300px;
			max-width: 400px;

			a {
				color: #FFFFFF;
				text-align: center;
			}

			h1 {
				text-align: center;
				padding: 0;
				;
				margin: 30px 0 30px 0;
			}
			.touxiang{
				height: 30px;
				label{margin-top: -10px;
				}
			}
			.listbox {
				display: flex;
				margin-bottom: 20px;
				padding-right: 50px;
				// .touxiang{
				// 	height: 45px;
				// }
				label {
					width: 100px;
					line-height: 45px;
					text-align: right;
				}

				input {
					outline: none;
					text-indent: 10px;
					width: 260px;
					/* width: auto; */
					border: none;
					border-radius: 3px;
					height: 36px;
				}
			}

			.form_item {
				margin: 25px 0;
				vertical-align: middle;
				
				.subbtn {
					background-color: rgba(244, 22, 7, 0.5);
					color: aliceblue;
					height: 45px;
					font-size: 20px;
					cursor: pointer;
					width: 300px;
					text-indent: 0px;
					border-radius: 20px;
					border: 0px;
				}
			}
		}
	}
}
</style>